<template>
	<div class="content">
		<Spin size="large" fix v-if="spinShow"></Spin>
		<Form ref="formValidate" :model="form" label-position="top">
			<div class="formBox" style="margin-bottom:20px">
				<div class="formBox-item">
					<FormItem
						label="单位名称"
						prop="unitName"
						:rules="[
							{ required: true, message: '单位名称不能为空', trigger: 'blur' }
						]"
					>
						<Input
							v-model="form.unitName"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入单位名称"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="单位代码"
						prop="unitCode"
						:rules="[
							{
								required: true,
								message: '单位代码只能为数字字母',
								pattern: '^[0-9a-zA-Z]*$',
								trigger: 'blur'
							}
						]"
					>
						<Input
							v-model="form.unitCode"
							:disabled="!isEdit || copyForm.unitCode != ''"
							maxlength="20"
							clearable
							placeholder="请输入单位代码"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="上级单位代码"
						prop="superiorUnitCode"
						:rules="[
							{
								required: true,
								message: '上级单位代码只能为数字字母',
								pattern: '^[0-9a-zA-Z]*$',
								trigger: 'blur'
							}
						]"
					>
						<Input
							v-model="form.superiorUnitCode"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入上级单位代码"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="执行灶别"
						prop="boardRateId"
						:rules="[
							{
								required: true,
								message: '灶别不能为空',
								trigger: 'change'
							}
						]"
					>
						<Select
							v-model="form.boardRateId"
							:disabled="!isEdit"
							placeholder="请选择灶别"
							style="width: 200px"
							clearable
						>
							<Option
								v-for="item in boardRateList"
								:value="item.id + ''"
								:key="item.id"
								>{{ item.ovenClass }}</Option
							>
						</Select>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="部队驻地"
						prop="unitBase"
						:rules="[
							{ required: true, message: '部队驻地不能为空', trigger: 'blur' }
						]"
					>
						<Input
							v-model="form.unitBase"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入部队驻地"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="详细地址" prop="detailedAddress">
						<Input
							v-model="form.detailedAddress"
							:disabled="!isEdit"
							maxlength="200"
							clearable
							placeholder="请输入详细地址"
						>
						</Input>
					</FormItem>
				</div>
			</div>
			<div class="formBox" style="margin-bottom:20px">
				<div class="formBox-title">单位实力</div>
				<div class="formBox-item">
					<FormItem
						label="义务兵人数"
						prop="conscripts"
						:rules="[
							{
								required: true,
								message: '义务兵人数只能为数字字母',
								trigger: 'blur',
								type: 'number'
							}
						]"
					>
						<InputNumber
							v-model.number="form.conscripts"
							:disabled="!isEdit"
							:min="0"
							:parser="0"
							maxlength="20"
							clearable
							placeholder="请输入义务兵人数"
							style="width: 200px"
						>
						</InputNumber>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="士官人数"
						prop="cadre"
						:rules="[
							{
								required: true,
								message: '士官人数只能为数字',
								pattern: '^[0-9a-zA-Z]*$',
								trigger: 'blur',
								type: 'number'
							}
						]"
					>
						<InputNumber
							v-model.number="form.cadre"
							:disabled="!isEdit"
							maxlength="20"
							:min="0"
							:parser="0"
							clearable
							placeholder="请输入士官人数"
							style="width: 200px"
						>
						</InputNumber>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="干部人数"
						prop="sergeant"
						:rules="[
							{
								required: true,
								message: '干部人数只能为数字',
								pattern: '^[0-9a-zA-Z]*$',
								trigger: 'blur',
								type: 'number'
							}
						]"
					>
						<InputNumber
							v-model.number="form.sergeant"
							:disabled="!isEdit"
							:min="0"
							:parser="0"
							maxlength="20"
							clearable
							placeholder="请输入干部人数"
							style="width: 200px"
						>
						</InputNumber>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem
						label="文员人数"
						prop="clerkNumber"
						:rules="[
							{
								required: true,
								message: '文员人数不能为空',
								trigger: 'blur',
								type: 'number'
							}
						]"
					>
						<InputNumber
							v-model.number="form.clerkNumber"
							:disabled="!isEdit"
							maxlength="20"
							:min="0"
							:parser="0"
							clearable
							placeholder="请输入文员人数"
							style="width: 200px"
						>
						</InputNumber>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="总人数">
						<InputNumber
							v-model="totalPeople"
							disabled
							:min="0"
							:parser="0"
							maxlength="20"
							clearable
							style="width: 200px"
						>
						</InputNumber>
					</FormItem>
				</div>
			</div>
			<div class="formBox" style="margin-bottom:20px">
				<div class="formBox-item">
					<FormItem label="司务长">
						<Input
							v-model="form.secretary"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入司务长"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="经济民主组组长">
						<Input
							v-model="form.unitCommander"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入经济民主组组长"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="单位领导">
						<Input
							v-model="form.fuyingzhang"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入单位领导"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="给养员">
						<Input
							v-model="form.jiyangyuan"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入给养员"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="值班员">
						<Input
							v-model="form.zhibanyuan"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入值班员"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
				<div class="formBox-item">
					<FormItem label="监督员">
						<Input
							v-model="form.jianduyuan"
							:disabled="!isEdit"
							maxlength="20"
							clearable
							placeholder="请输入监督员"
							style="width: 200px"
						>
						</Input>
					</FormItem>
				</div>
			</div>
		</Form>
		<div class="formBox">
			<cusButton
				class="mr_20 mb_20 mt_15"
				type="primary"
				@onClick="isEdit = true"
        v-permission="30"
				v-if="!isEdit"
				>修改</cusButton
			>
			<cusButton class="mr_20 mb_20 mt_15" @onClick="cancelBtn()" v-if="isEdit"
				>取消</cusButton
			>
			<cusButton
				class="mr_20 mb_20 mt_15"
				type="primary"
				@onClick="saveBtn"
        v-permission="30"
				v-if="isEdit"
				>保存</cusButton
			>
		</div>
	</div>
</template>

<script>
import {
	getUnitAllInfo,
	saveUnitAllInfo,
	getboardrate
} from '@/api/business/dishesModule'
import { InputNumber } from 'view-design'
export default {
	components: { InputNumber },
	data() {
		return {
			ruleValidate: {},
			form: {
				name: '', // 单位名称
				code: '', // 单位代码
				topCode: '', // 上级单位代码
				address: '', // 部队驻地
				addressDetail: '',
				conscripts: '',
				cadre: '',
				sergeant: '',
				clerkNumber: '',
				boardRateId: ''
			},
			copyForm: {},
			isEdit: false,
			data: [],
			copyData: [],
			spinShow: false,
			boardRateList: []
		}
	},
	mounted() {
		this.getboardrate()
		this.getUnitAllInfoApi()
	},
	computed: {
		totalPeople() {
			return (
				Number(this.form.conscripts) +
				Number(this.form.cadre) +
				Number(this.form.sergeant) +
				Number(this.form.clerkNumber)
			)
		}
	},
	methods: {
		getboardrate() {
			getboardrate({
				boardRateType: 0
			}).then((res) => {
				if (res.retCode == 2000) {
					this.boardRateList = res.data
				}
			})
		},
		saveBtn() {
			this.$refs['formValidate'].validate((valid) => {
				if (valid) {
					this.saveUnitAllInfoApi()
				}
			})
		},
		cancelBtn() {
			this.form = this.$cu.deepClone(this.copyForm)
			this.data = this.$cu.deepClone(this.copyData)

			this.$refs['formValidate'].resetFields()
			this.isEdit = false
		},
		// 获取单位信息
		getUnitAllInfoApi() {
			this.spinShow = true;
			return new Promise((resolve) => {
				getUnitAllInfo({}).then((res) => {
					this.spinShow = false;
					if (res.retCode === 2000) {
						this.form = res.data
						this.form.boardRateId = res.data.boardRateId + ''
						console.log(this.form)
						this.copyForm = this.$cu.deepClone(this.form)
						if (this.copyForm.unitCode == null) {
							this.copyForm.unitCode = ''
						}
						resolve()
					}
				})
			})
		},
		// 保存基础信息
		saveUnitAllInfoApi() {
			this.spinShow = true
			return new Promise((resolve) => {
				saveUnitAllInfo({
					unitName: this.form.unitName,
					unitCode: this.form.unitCode,
					superiorUnitCode: this.form.superiorUnitCode,
					unitCommander: this.form.unitCommander,
					unitBase: this.form.unitBase,
					secretary: this.form.secretary,
					fuyingzhang: this.form.fuyingzhang,
					jiyangyuan: this.form.jiyangyuan,
					zhibanyuan: this.form.zhibanyuan,
					jianduyuan: this.form.jianduyuan,
					detailedAddress: this.form.detailedAddress,
					boardRateId: this.form.boardRateId,
					conscripts: this.form.conscripts,
					cadre: this.form.cadre,
					sergeant: this.form.sergeant,
					clerkNumber: this.form.clerkNumber,
					registered: this.totalPeople
				}).then((res) => {
					if (res.retCode === 2000) {
						this.isEdit = false
						this.getUnitAllInfoApi()
						resolve()
					}
					this.spinShow = false
				})
			})
		}
	}
}
</script>
<style scoped>
/deep/.ivu-form-item-label {
	justify-content: flex-start !important;
}
/deep/.ivu-input-icon {
	height: 40px !important;
	line-height: 40px !important;
}
</style>
<style lang="less" scoped>
.content {
	// padding: 20px;
	position: relative;
}

.formBox {
	width: 100%;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
	padding: 5px 20px 1px;
	display: flex;
	flex-wrap: wrap;
	&-item {
		width: 200px;
		margin-right: 48px;
	}
	&-title {
		color: rgba(0, 0, 0, 0.85) !important;
		font-size: 16px;
		margin-top: 10px;
		margin-bottom: 10px;
		width: 100%;
	}
}
.mt_15 {
	margin-top: 15px;
}
.mr_20 {
	margin-right: 20px;
}
</style>
